<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>奥特曼</title>
    <script type="text/javascript" src="../js/vue-2.6.12.js"> </script>
    <script type="text/javascript" src="../js/vue-router-3.4.9.js"> </script>
    <script type="text/javascript" src="../js/myajax.js"></script>
    <script type="text/javascript" src="../js/qs-6.9.4.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/atm/show"><button>查询</button></router-link>
        <router-link to="/atm/add"><button>添加</button></router-link>

        <hr>
        <router-view></router-view>
    </div>
    <template id="atm-table">
        <div>
            <table border="1">
                <thead>
                <tr>
                    <th>奥特曼编号</th>
                    <th>奥特曼姓名</th>
                    <th>奥特曼身高</th>
                    <th>奥特曼体重</th>
                    <th>奥特曼飞行速度</th>
                    <th>奥特曼生存时间</th>
                    <th>奥特曼描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tr v-for="atm in list" :key="atm.atmId">
                    <td>{{atm.atmId}}</td>
                    <td>{{atm.atmName}}</td>
                    <td>{{atm.height}}</td>
                    <td>{{atm.weight}}</td>
                    <td>{{atm.fly}}</td>
                    <td>{{atm.life}}</td>
                    <td>{{atm.description}}</td>
                    <td>
                        <button @click="deleteAtm(atm.atmId)">删除</button>
                        <router-link :to="{path:'/atm/update',query:{id:atm.atmId}}"><button>更新</button></router-link>
                    </td>
                </tr>
            </table>
            <p>
                <a href=""v-for="page in pages" :key="page" @click.prevent="handleAClick(page)">
                    <button style="margin: 0 10px">{{page}}</button>
                </a>
            </p>
        </div>
    </template>
    <template id="add-form">
        <div>
            <form action="" @submit.prevent="addOne">
                奥特曼姓名：<input type="text" v-model="atm.atmName"><br>
                奥特曼身高：<input type="text" v-model="atm.height"><br>
                奥特曼体重：<input type="text" v-model="atm.weight"><br>
                奥特曼飞行速度：<input type="text" v-model="atm.fly"><br>
                奥特曼生存时间：<input type="text" v-model="atm.life"><br>
                奥特曼描述：<input type="text" v-model="atm.description"><br>
                <input type="submit" value="添加">
            </form>
        </div>
    </template>
    <template id="update-form">
        <div>
            <form action="" @submit.prevent="updateOne">
                奥特曼编号：<input type="text" readonly="readonly" v-model="atm.atmId"><br>
                奥特曼姓名：<input type="text" v-model="atm.atmName"><br>
                奥特曼身高：<input type="text" v-model="atm.height"><br>
                奥特曼体重：<input type="text" v-model="atm.weight"><br>
                奥特曼飞行速度：<input type="text" v-model="atm.fly"><br>
                奥特曼生存时间：<input type="text" v-model="atm.life"><br>
                奥特曼描述：<input type="text" v-model="atm.description"><br>
                <input type="submit" value="更新">
            </form>
        </div>
    </template>

    <script>
        const updateForm = {
            template:"#update-form",
            data(){
                return{
                    atm:{}
                }
            },
            created(){
                axios.get("/Atm/atm/showOne",{
                    params:{
                        id:this.$route.query.id
                    }
                }).then(resp=>{
                    let data = resp.data.atm;
                    this.atm = data;
                    console.log(this.atm);
                }).catch(err=>{
                    console.log(err);
                })
            },methods:{
                updateOne(){
                    axios.post("/Atm/atm/updateOne",Qs.stringify({atm: this.atm},{allowDots:true})).then(resp=>{
                        let data =resp.data;
                        if(data.status == "success"){
                            alert("更新成功");
                            this.$router.push("/atm/show");
                        }else{
                            alert("更新失败");
                        }
                    })
                }

            }
        }
        const AtmTable = {
            template:"#atm-table",
            data(){
                return{
                    list:[],
                    pages:[]
                }
            },
            created: function () {
                this.handleAClick(1);
            },
            methods: {
                handleAClick(i) {
                    axios.get("/Atm/atm/showAll", {
                        params: {
                            pageNum: i,
                            pageSize: 5
                        }
                    }).then(resp => {
                        let data = resp.data;
                        this.list = data.list;
                        this.pages = data.pages;
                    })
                },
                deleteAtm(i) {
                    let isDelete = confirm("确定删除吗?");
                    if (!isDelete) {
                        return;
                    }
                    axios.get("/Atm/atm/deleteOne", {
                        params: {
                            id: i
                        }
                    }).then(resp => {
                        let responseData = resp.data;
                        console.log(responseData);
                        if (responseData.status == "success") {
                            alert("删除成功");
                            this.handleAClick(1);
                        } else {
                            alert("删除失败");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
        }
        const addForm  = {
            template: "#add-form",
            data(){
                return{
                    atm:{}
                }
            },
            methods: {
                addOne() {
                    axios.post("/Atm/atm/addOne",Qs.stringify({atm:this.atm},{allowDots:true})).then(resp=>{
                        if(resp.data.status == "success"){
                            alert("添加成功");
                            this.$router.push("/atm/show");
                        }else{
                            alert("添加失败");
                        }
                    })
                }
            }
        }
        const router = new VueRouter({
            routes:[
                {path:"/",redirect:"/atm/show"},
                {path: "/atm/show",component:AtmTable},
                {path: "/atm/add",component: addForm},
                {path: "/atm/update",component: updateForm}
            ]
        })
        new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>